<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>结构性伪类选择符 E:first-of-type</title>
		<style>
			p:first-of-type{color:#f00;}
		</style>
	</head>
	<body>
		<div id="A">
			<h4>我是父亲的第1个子元素</h4>
			<p>我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了</p>
			<p>我是父亲的第3个子元素</p>
			<p>我是父亲的第4个子元素</p>
			<p>我是父亲的第5个子元素</p>
		</div>
		
		<hr />
		
		<div id="B">
			<p>我是父亲的第1个子元素，我是父亲的第一个p标签所以我被选中了</p>
			<p>我是父亲的第2个子元素</p>
			<p>我是父亲的第3个子元素</p>
			<p>我是父亲的第4个子元素</p>
			<p>我是父亲的第5个子元素</p>
		</div>
		
		<!--
			注意:of-type系列和child系列不同之处在于：
				child系列的元素序号是把父亲的所有子元素放在一个集合中，然后排序  
					例如: id="A"的div共有5个子元素，所以他们在child系列中的序号是
					
					<div id="A">
						① <h4>我是父亲的第1个子元素</h4>
						② <p>
							我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了
						  </p>
						③ <p>我是父亲的第3个子元素</p>
						④ <p>我是父亲的第4个子元素</p>
						⑤ <p>我是父亲的第5个子元素</p>
					</div>
					
				of-type系列的元素序号是把指定的元素类型的所有同类元素放在一个集合中，然后排序。
					例如: id="A"的div共有5个子元素，但是p元素只有四个，
						所以p元素在of-type系列中的序号是
						
						<div id="A">
						  <h4>我是父亲的第1个子元素</h4>
						① <p>
							我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了
						  </p>
						② <p>我是父亲的第3个子元素</p>
						③ <p>我是父亲的第4个子元素</p>
						④ <p>我是父亲的第5个子元素</p>
					</div>
				
				
				所有的child和of-type都遵循此原则。
				如果指定元素的所有兄弟元素都为同一类型(例如:ul内部子元素全部为li)，那么 child完全等于of-tyoe
		
		-->
	</body>
</html>
			